<template>
  <div>
    <!-- <transition 
    enter-active-class="animate__animated animate__zoomInDown" 
    leave-active-class="animate__animated animate__hinge"> -->
    <model :visible="isShow" :show="isShow" @confirm="confirm" @cancel="cancel">
      <template slot="title">
        <h1>友情提醒</h1>
      </template>

      <template slot="body">
        <h3>请确认您的需求</h3>
      </template>
    </model>
    <!-- </transition> -->
    <button @click="show">点击弹出Model</button>
  </div>
</template>
<script>
import model from "./model.vue";

export default {
  data() {
    return {
      isShow: false,
    };
  },
  components: {
    model,
  },
  methods: {
    show() {
      this.isShow = true;
    },
    confirm() {
      //点击确认按钮
      console.log("qr");
      this.isShow = false;
    },
    cancel() {
      //点击取消按钮
      this.isShow = false;
      console.log("qx");
    },
  },
};
</script>
